<!DOCTYPE html>
<html lang="en">
  <head>
    <title>crayon - performance example</title>
    <meta charset="utf-8">
  </head>
  <body>
    <canvas id="my-canvas" width="400" height="400"></canvas>

    <script src="../crayon.min.js"></script>
    <script>

      var canvas = new crayon.Canvas({ id: "my-canvas" });

      var i, limit = 2000;
      var counter, sprite, sprites = [];

      for(i=0; i<limit; i+=1){
        sprite = new crayon.Sprite({
          src: 'img/html5.png',
          x: 200 + (Math.random() - 0.5) * 400,
          y: 200 + (Math.random() - 0.5) * 400,
          alpha: 0.25
        });
        canvas.add(sprite);
        sprites.push(sprite);
      }

      counter = new crayon.Text({
        label: "FPS: 0",
        align: 'left',
        bold: true,
        x: 10,
        y: 20,
        size: 20,
        z: 1,
        shadow: true,
        shadowBlur: 5,
        shadowColor: '#fff'
      });

      canvas.add(counter);

      var fps, totalTime, lastTime = Date.now();
      var times = [0, 0, 0, 0, 0, 0];

      crayon.timer.on('frame', function(time) {

        times.shift();
        times.push(time - lastTime);
        lastTime = time;

        totalTime = 0;
        for(i=0; i<6; i+=1){
          totalTime += times[i];
        }

        fps = (Math.round(600000 / totalTime)) / 100;

        counter.set('label', 'FPS: ' + fps);

        var t = time / 1000;
        var sin = Math.sin(t * 4);

        var x = 1 + sin / 10;
        var y = 1 - sin / 10;

        for(i=0; i<limit; i+=1){
          sprites[i].set({
            scaleX: x,
            scaleY: y
          });
        }
      });

    </script>
  </body>
</html>